import React from 'react'
import {Form, Button, Input, message} from "antd"
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import "./Login.css"
import Particles from "react-tsparticles"
import axios from "axios"

export default function Login(props) {

  const onFinish = (values) => {
    console.log(values);

    axios.get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(res=>{
      console.log(res.data)
      if(res.data.length===0){
          message.error("用户名或密码不匹配")
      }else{
          localStorage.setItem("token",JSON.stringify(res.data[0]))
          props.history.push("/")
      }
    })
  }

  return (
    <div style={{background: 'rgb(35,39,65)', height: "100vh", overflow:"hidden"}}>
      <Particles height={document.documentElement.clientHeight} 
        params={
          {
            "background": {
              "color": {
                "value": "skyblue"
              },
              "position": "50% 50%",
              "repeat": "no-repeat",
              "size": "cover"
            },
            "fullScreen": {
              "zIndex": 1
            },
            "interactivity": {
              "events": {
                "onClick": {
                  "enable": true,
                  "mode": "push"
                },
                "onHover": {
                  "enable": true,
                  "mode": "grab",
                  "parallax": {
                    "enable": true,
                    "force": 60
                  }
                }
              },
              "modes": {
                "bubble": {
                  "distance": 400,
                  "duration": 2,
                  "opacity": 0.8,
                  "size": 40
                },
                "grab": {
                  "distance": 400
                }
              }
            },
            "particles": {
              "color": {
                "value": "#ffffff"
              },
              "links": {
                "color": {
                  "value": "#ffffff"
                },
                "distance": 150,
                "enable": true,
                "opacity": 0.4
              },
              "move": {
                "attract": {
                  "rotate": {
                    "x": 600,
                    "y": 1200
                  }
                },
                "enable": true,
                "outModes": {
                  "bottom": "out",
                  "left": "out",
                  "right": "out",
                  "top": "out"
                }
              },
              "number": {
                "density": {
                  "enable": true
                }
              },
              "opacity": {
                "random": {
                  "enable": true
                },
                "value": {
                  "min": 0.1,
                  "max": 0.5
                },
                "animation": {
                  "enable": true,
                  "speed": 3,
                  "minimumValue": 0.1
                }
              },
              "size": {
                "random": {
                  "enable": true
                },
                "value": {
                  "min": 0.1,
                  "max": 10
                },
                "animation": {
                  "enable": true,
                  "speed": 20,
                  "minimumValue": 0.1
                }
              }
            }
          }
        }
      />

      <div className="formContainer">
        <div className="logintitle">Dawn发布管理系统</div>
        <Form
          name="normal_login"
          className="login-form"
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
